<template>
  <view>
    <navbar>颜色</navbar>
    <view :class="c_card">
      <view :class="c_title1">文字颜色</view>
	  <view class="b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">c-xx(后缀变量):</text>{color:
        #xxx(色值);}
      </view>
      <view :class="c_title1">背景颜色</view>
	  <view class="b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">bg-xx(后缀变量):</text>{background-color:
        #xxx(色值);}
      </view>
      <view :class="c_title1">边框颜色</view>
	  <view class="b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">bc-xx(后缀变量):</text>{border-color:
        #xxx(色值);}
      </view>
      <view class="mt-32">
        默认颜色(如需添加更多颜色请移步自定义章节):
      </view>
      <view>
        <view class="mt-20 dp-f ai-c" v-for="(c, n) in color" :key="n">
          <view class="w-500">
            <text :class="c_strong">xx-{{ c.name }}:</text>
            <text>{{ c.title }}-{{ c.value }}</text>
          </view>
          <view class="h-50 w-100 b-1" :class="'bg-' + c.name"></view>
        </view>
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="dp-f ai-c jc-sa mt-20 w-500 h-100">
        <view class="w-150 h-60 dp-fc c-999 fs-32 b-1">
          c-999
        </view>
        <view class="w-150 h-60 dp-fc c-0f0 fs-32 b-1">
          c-0f0
        </view>
        <view class="w-150 h-60 dp-fc c-f00 fs-32 b-1">
          c-f00
        </view>
      </view>
      <view class="dp-f ai-c jc-sa mt-20 w-500 h-100 c-fff">
        <view class="w-150 h-60 dp-fc bg-999 fs-32">
          bg-999
        </view>
        <view class="w-150 h-60 dp-fc bg-0f0 fs-32">
          bg-0f0
        </view>
        <view class="w-150 h-60 dp-fc bg-f00 fs-32">
          bg-f00
        </view>
      </view>
       <view class="dp-f ai-c jc-sa mt-20 w-500 h-100 c-666">
        <view class="w-150 h-60 dp-fc fs-32 b-3 bc-999">
          bc-999
        </view>
        <view class="w-150 h-60 dp-fc fs-32 b-3 bc-0f0">
          bc-0f0
        </view>
        <view class="w-150 h-60 dp-fc fs-32 b-3 bc-f00">
          bc-f00
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      color: [
        { name: "000", value: "#000", title: "纯黑" },
        { name: "333", value: "#333", title: "黝黑" },
        { name: "666", value: "#666", title: "暗黑" },
        { name: "999", value: "#999", title: "灰色" },
        { name: "e5", value: "#e5e5e5", title: "浅灰" },
        { name: "f1", value: "#f1f1f1", title: "乳白" },
        { name: "fff", value: "#fff", title: "纯白" },
        { name: "0ff", value: "#00ffff", title: "青色" },
        { name: "0f0", value: "#00ff00", title: "绿色" },
        { name: "ff0", value: "#ffff00", title: "黄色" },
        { name: "f00", value: "#ff0000", title: "红色" },
        { name: "f0f", value: "#ff00ff", title: "洋红" },
        { name: "00f", value: "#0000ff", title: "蓝色" }
      ]
    };
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped></style>
